<template>
    <div class="mb-15 search-container flex">
        <div class="select-list sl-l flex">
            <div class="pt-10">
                <span>{{
                    indexCode == "jys" ? "归属二级学院" : "所属学院"
                }}</span>
                <el-select
                    class="mx-15 w-175"
                    size="mini"
                    popper-class="pop-select"
                    v-model="searchQuery.belongTwoLevelSchool"
                    @change="getClassOrTeachReswarch"
                    placeholder="请选择"
                >
                    <el-option
                        v-for="item in collegelist"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                    >
                    </el-option>
                </el-select>
            </div>
            <div class="pt-10">
                <span>{{ indexCode == "jys" ? "教研室" : "班级" }}</span>
                <el-select
                    class="mx-15 w-175"
                    size="mini"
                    popper-class="pop-select"
                    v-model="searchQuery.classId"
                    @change="getTearchersOrStudents"
                    placeholder="请选择"
                >
                    <el-option
                        v-for="item in belongClassOption"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                    >
                    </el-option>
                </el-select>
            </div>
            <div class="pt-10">
                <span>{{ indexCode == "jys" ? "教师姓名" : "学生姓名" }}</span>
                <el-select
                    class="mx-15 w-175"
                    size="mini"
                    popper-class="pop-select"
                    v-model="searchQuery.studentId"
                    placeholder="请选择"
                >
                    <el-option
                        v-for="item in studentTeacherOption"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                    >
                    </el-option>
                </el-select>
            </div>
        </div>
        <div class="btn-list pt-10">
            <el-button
                data-none-border
                size="mini"
                popper-class="pop-select"
                @click="search('search')"
                type="primary"
                >查询</el-button
            >
            <el-button data-btn size="mini" @click="reset">重置</el-button>
            <el-button
                data-btn
                size="mini"
                :loading="downloading"
                @click="downLoad"
                >下载</el-button
            >
        </div>
    </div>
</template>

<script>
import { mapState } from 'vuex';
import {
    getClassList,
    getTeachingResearchList,
    getStudentTeacherList
} from '@/api/cockpit';

export default {
    name: 'CockpitSearch',
    computed: {
        ...mapState({
            collegelist: state => state.cockpit.collegelist,
            levelOptions: state => state.cockpit.levelOptions,
            indexCode: state => state.cockpit.indexCode
        })
    },

    data () {
        return {
            // 查询对象
            searchQuery: {
                // 归属二级学院
                belongTwoLevelSchool: null,
                // 教研室or班主任驾驶舱 所属班级/教研室ID
                classId: null,
                // 教研室or班主任驾驶舱 老师/学生
                studentId: null
            },
            // 重置查询参数
            resetQuery: null,
            //  教研室组or班级组
            belongClassOption: [],
            //  老师/学生组
            studentTeacherOption: [],
            downloading: false
        };
    },
    created () {
        this.resetQuery = { ...this.searchQuery };
    },
    methods: {
        // 获取教研室or班级组
        getClassOrTeachReswarch (val) {
            this.searchQuery.classId = null
            this.searchQuery.studentId = null
            if (this.indexCode === 'jys') {
                getTeachingResearchList({ orgId: val }).then(res => {
                    this.belongClassOption = res || [];
                });
            } else {
                getClassList({ orgId: val }).then(res => {
                    this.belongClassOption = res || [];
                });
            }
        },
        // 老师/学生组
        getTearchersOrStudents (val) {
            this.searchQuery.studentId = null
            getStudentTeacherList({ orgId: val }).then(res => {
                this.studentTeacherOption = res || [];
            });
        },
        // searchType: 'search' 为查询参数 ，'init' 为初始参数,'echart' 为echarts查询参数
        search (isSearch) {
            this.$emit(
                'handleSearch',
                this.searchQuery,
                isSearch,
                // this.manageType
                ''
            );
        },
        reset () {
            this.searchQuery = { ...this.resetQuery };
            // console.log(this.searchQuery, '=====');
            this.search('init');
        },
        downLoad () {
            this.downloading = true;
            this.$emit('downloadFile');
        }
    }
};
</script>

<style lang="scss" scoped>

.search-container {
    flex-wrap: wrap;
    span {
        color: #fff;
    }
    ::v-deep .el-select {
        .el-input__inner {
            width: 128px;
            height: 32px;
            font-size: 14px;
            color: #9da5b7;
        }
    }
    .el-button[data-new-btn] {
        background: #169bd5;
        border: none;
    }
    .el-select[data-select] {
        margin-top: 15px;
    }
    .flex {
        flex-wrap: wrap;
    }
    .btn-right {
        flex-basis: 38%;
        text-align: right;
        margin-left: 25px;
    }
    ::v-deep .level {
        .el-input__inner {
            width: 173px !important;
        }
    }
}
.w-175 {
    width: 175px;
    background: #04214e;
    ::v-deep .el-input__inner {
        padding-right: 0;
        width: 175px !important;
    }
}
</style>
